﻿<!DOCTYPE html>
<!--HTML5 doctype-->
<html>

<head>
    <script>
        (function () {
            if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
                var msViewportStyle = document.createElement("style");
                msViewportStyle.appendChild(
                        document.createTextNode("@-ms-viewport{width:auto!important}")
                );
                document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
            }
        })();
    </script>

    <title>Gamest</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="css/icons.css"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/appframework.css"/>
    <link rel="stylesheet" type="text/css" href="css/lists.css"/>
    <link rel="stylesheet" type="text/css" href="css/forms.css"/>
    <link rel="stylesheet" type="text/css" href="css/buttons.css"/>
    <link rel="stylesheet" type="text/css" href="css/badges.css"/>
    <link rel="stylesheet" type="text/css" href="css/grid.css"/>

    <link rel="stylesheet" type="text/css" href="css/android.css"/>
    <link rel="stylesheet" type="text/css" href="css/win8.css"/>
    <link rel="stylesheet" type="text/css" href="css/bb.css"/>
    <link rel="stylesheet" type="text/css" href="css/ios.css"/>
    <link rel="stylesheet" type="text/css" href="css/ios7.css"/>
    <link rel="stylesheet" type="text/css" href="css/tizen.css"/>
    <link rel="stylesheet" type="text/css" href="css/firefox.css"/>

    <link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css"/>
    <link rel="stylesheet" type="text/css" href="plugins/css/af.popup.css"/>
    <link rel="stylesheet" type="text/css" href="plugins/css/af.scroller.css"/>
    <link rel="stylesheet" type="text/css" href="plugins/css/af.selectBox.css"/>

    <script type="text/javascript" charset="utf-8" src="deps/underscore.js"></script>
    <script type="text/javascript" charset="utf-8" src="deps/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="deps/jq.appframework.js"></script>
    <script type="text/javascript" charset="utf-8" src="deps/json2.js"></script>
    <script type="text/javascript" charset="utf-8" src="deps/backbone.js"></script>
    <script type="text/javascript" charset="utf-8" src="deps/ssq.js"></script>

    <script type="text/javascript" charset="utf-8" src="plugins/af.actionsheet.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.css3animate.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.passwordBox.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.scroller.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.selectBox.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.touchEvents.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.touchLayer.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.popup.js"></script>

    <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.js"></script>
    <script type="text/javascript" charset="utf-8" src="ui/transitions/popup.js"></script>
    <script type="text/javascript" charset="utf-8" src="ui/transitions/fade.js"></script>
    <script type="text/javascript" charset="utf-8" src="ui/transitions/flip.js"></script>
    <script type="text/javascript" charset="utf-8" src="ui/transitions/slide.js"></script>
    <script type="text/javascript" charset="utf-8" src="ui/transitions/slideDown.js"></script>
    <script type="text/javascript" charset="utf-8" src="ui/transitions/slideUp.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.slidemenu.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/af.8tiles.js"></script>

    <script type="text/javascript" charset="utf-8" src="security/jsbn.js"></script>
    <script type="text/javascript" charset="utf-8" src="security/random.js"></script>
    <script type="text/javascript" charset="utf-8" src="security/myMD5.js"></script>
    <script type="text/javascript" charset="utf-8" src="security/utils.js"></script>
    <script type="text/javascript" charset="utf-8" src="security/rsa.js"></script>

    <script type="text/javascript">
        function loadedPanel(what) {
            //We are going to set the badge as the number of li elements inside the target
            $.ui.updateBadge("#aflink", $("#af").find("li").length);
        }

        function unloadedPanel(what) {
            console.log("unloaded " + what.id);
        }

        if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
//            if (confirm("开启桌面浏览器模式以同时支持拖动和滚轮?"))
            {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.charset = "utf-8";
                script.src = "plugins/af.desktopBrowsers.js";
                var tag = $("head").append(script);
                //$.os.desktop=true;
            }
        }
        //        $.feat.nativeTouchScroll=true;


        var changeTheme = function (theme) {
            $.ui.useOSThemes = true;
            $.ui.overlayStatusbar = true; // for ios7 only to add header padding to overlay the statusbar
            // $.ui.resetScrollers=true;
            if (theme.length <= 0) {
                theme = "appframework"
            }

            $.ui.useOSThemes = true;
            if (theme == "win8")
                $.os.ie = true;
            else if (theme == "firefox")
                $.os.fennec = "true";
            $.ui.ready(function () {
                $("#afui").get(0).className = theme;
            });
        }

        var webRoot = "./";
        // $.os.android=true;
        $.ui.autoLaunch = false;
        $.ui.openLinksNewTab = false;
        $.ui.splitview = false;

        $(document).ready(function () {
            $.ui.launch();
        });

        /* This code is used to run as soon as intel.xdk activates */
        var onDeviceReady = function () {
            $.ui.launch();
            intel.xdk.device.setRotateOrientation("portrait");
            intel.xdk.device.setAutoRotate(false);
            webRoot = intel.xdk.webRoot + "";
            //hide splash screen
            intel.xdk.device.hideSplashScreen();
            $.ui.blockPageScroll(); //block the page from scrolling at the header/footer
        };
        document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);

        function showHide(obj, objToHide) {
            var el = $("#" + objToHide)[0];

            if (obj.className == "expanded") {
                obj.className = "collapsed";
            } else {
                obj.className = "expanded";
            }
            $(el).toggle();
        }

        function clearMsg() {
            $("#message_list").innerHTML = "";
        }


    </script>

    <link rel="stylesheet" type="text/css" href="css/bubbles.css">
</head>
<body>

<div id="afui">
    <div id="splashscreen" class='ui-loader heavy'>
        Java Web&amp;File(StreamZip supported) Server/1.1
        <br>
        <br>
        <span class='ui-icon ui-icon-loading spin'></span>

        <h1>Starting client...</h1>
    </div>

    <header id="fileheader">
        <h1 id="pageTitle">Explorer</h1>
        <a id='menubadge' onclick='af.ui.toggleSideMenu()' class='menuButton' style="float:right"></a>
    </header>

    <div id="content">
        <div title='login' id="login" class="panel" selected="true">
            <header><h1>Login</h1></header>
            <nav></nav>
            <aside></aside>
            <form>
                <script type="text/javascript">
                    var login = function () {
                        var name = $("#name").val();
                        var pass = $("#pass").val();

                        xhr.request(function (response) {
                            if (response.substring(0,2)=="ok") {
                                ws.connect(response.substring(2));
                                $.ui.loadContent('chat_room', false, false, 'flip');
                                $.ui.clearHistory();
                            }
                            else {
                                $("#afui").popup(response);
                            }
//                        }, "login", JSON.stringify({"name": "'"+name+"'", "pass": "'"+bytes2base64(MD5(utf8Encode(pass)))+"'"}), "POST")
                        }, "login", JSON.stringify({"name": name, "pass": bytes2base64(MD5(utf8Encode(pass)))}), "POST")
                    };

                    var signup = function () {
                        var signupdiv = document.getElementById("sign_up_div");
                        if (signupdiv.style.display == "none") {
                            signupdiv.style.display = "";

                            checkName();
                            return;
                        }

                        var name = document.getElementById("name");
                        var pass = document.getElementById("pass");
                        var gender = $("[name='gender']:checked").val();

                        if (!(name.style.backgroundColor == "green" && pass.style.backgroundColor == "green" && gender)) {
                            return;
                        }

                        xhr.request(function (response) {
                            if (response == "ok") {
                                $("#afui").popup("注册成功!");
                                login()
                            }
                            else {
                                $("#afui").popup(response);
                            }
//                        }, "signup", JSON.stringify({"name": "'"+name.value+"'", "pass": "'"+bytes2base64(MD5(utf8Encode(pass.value)))+"'", "gender": "'"+gender+"'"}), "POST")
                        }, "signup", JSON.stringify({"name": name.value, "pass": bytes2base64(MD5(utf8Encode(pass.value))), "gender": gender}), "POST")
                    };
                </script>

                <div class="input-group" style="margin-left: auto;margin-right: auto; margin-top: 30px">
                    <form method="post" action="login">
                        <label for="name">Username:</label>
                        <input type="text" id="name" placeholder="username" oninput="checkName()">
                        <br/><br/>
                        <label for="pass">Password:</label>
                        <input type="text" id="pass" placeholder="password" style="-webkit-text-security:disc">

                        <div id="sign_up_div" style="display: none">
                            <script type="text/javascript">
                                function checkPass() {
                                    var pass = document.getElementById("pass");
                                    var pass1 = document.getElementById("pass1");
                                    var same = (pass.value == pass1.value) && pass.value.length >= 6;
                                    pass.style.backgroundColor = +same ? "green" : "red";
                                    pass1.style.backgroundColor = +same ? "green" : "red";
                                    return same;
                                }

                                function checkName() {
                                    if (document.getElementById("sign_up_div").style.display == 'none') return;

                                    var name = document.getElementById("name");
                                    if (name.value.length == 0) {
                                        name.style.backgroundColor = "red";
                                    }
                                    else {
                                        xhr.request(function (result) {
                                            name.style.backgroundColor = result == "ok" ? "green" : "red";
                                        }, "checkName", name.value, "GET")
                                    }
                                }
                            </script>
                            <label for="pass1">Repeat Password:</label>
                            <input type="text" onblur="checkPass()" oninput="checkPass()" id="pass1" placeholder="password" style="-webkit-text-security:disc">

                            <div class="input-group">
                                <label>Gender</label>
                                <input id="male" type="radio" name="gender" value="M"><label for="male">Male</label>
                                <input id="female" type="radio" name="gender" value="F"><label for="female">Female</label>
                                <input id="other_gender" type="radio" name="gender" value="N"><label for="other_gender">N/A</label>
                            </div>
                        </div>
                    </form>

                    <br/><br/>

                    <div class="grid">
                        <div class="col2">
                            <a href="javascript:login()" class="button block" id="login_b">Login</a>
                        </div>
                        <div class="col2">
                            <a href="javascript:signup()" class="button block" id="sign_up_b">Sign up</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div title='Chat Room' id="chat_room" class="panel" data-footer='footer' data-nav="main_menu">
        <div id="message_list">
            <div class="triangle-border left">
                <h4>石守谦 2015-01-27: </h4>吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?
            </div>
            <div class="triangle-border right">
                <h4>石守谦 2015-01-27: </h4>吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?吃饭了么?
            </div>
        </div>
        <div>
            <textarea rows="2" placeholder="文字消息" style="resize: none"></textarea>

            <div class="grid">
                <div class="col2">
                    <a class="button block" onclick="">发送</a>
                </div>
                <div class="col2">
                    <script type="text/javascript">
                        function showPopup() {
                            $("#afui").popup({
                                title: "高级",
                                message: '<div class="grid" id="advanced_chat">    <div class="grid">        <div class="col2">            <input id="bbbbb" type="checkbox" name="test2" value="2">            <label for="bbbbb" style="padding-bottom: 10px">仅队友可见</label>        </div>        <div class="col2"><input id="aaa" type="checkbox" name="test2" value="2">            <label for="aaa" style="padding-bottom: 10px">仅收听队友</label>        </div>    </div></div><div class="grid">    <div class="col2">        <a class="button block">发送图片</a>    </div>    <div class="col2">        <a class="button block">发送文件</a>    </div></div>',
                                doneText: "确定",
                                doneCallback: function () {
                                    if (document.getElementById("bbbbb").checked) {
                                        alert("checkbox is checked");
                                    }
                                },
                                cancelText: "取消",
                                cancelCallback: function () {
                                },
                                cancelOnly: false
                            });
                        }
                    </script>
                    <a class="button block" onclick="showPopup()">高级选项</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ------------------------------------------ -->

<footer id='footer'>
    <a href="#game_room" class='icon heart'>Game Room</a>
    <a href="#chat_room" class="icon chat">Chat Room</a>
    <a href="#personal" class="icon user">Profile</a>
</footer>

<nav title="Left Menu" id="main_menu">
    <ul class="list">
        <li class="divider">Functions</li>
        <li>
            <a href="?/#files_root">Home</a>
        </li>
        <li>
            <a onclick='$.ui.goBack()'>Back</a>
        </li>
        <li>

        </li>

        <li class="divider">Themes</li>
        <li>
            <a onclick="changeTheme('appframework')" data-ignore="true">App Framework theme</a>
        </li>
        <li>
            <a onclick="changeTheme('ios')" data-ignore="true">iOS theme</a>
        </li>
        <li>
            <a onclick="changeTheme('android')" data-ignore="true">Android theme</a>
        </li>
        <li>
            <a onclick="changeTheme('win8')" data-ignore="true">Win8 theme</a>
        </li>
        <li>
            <a onclick="changeTheme('bb')" data-ignore="true">BB10 theme</a>
        </li>
        <li>
            <a onclick="changeTheme('ios7')" data-ignore="true">ios7</a>
        </li>
        <li>
            <a onclick="changeTheme('tizen')" data-ignore="true">tizen</a>
        </li>
        <li>
            <a onclick="changeTheme('firefox')" data-ignore="true">firefox</a>
        </li>
    </ul>
</nav>

<aside title="Right">
    <p>This is a right side menu</p>
</aside>

</body>
</html>